{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% set utm_params = 'utm_source=www.mozilla.org&utm_medium=referral&utm_campaign=nav&utm_content=who-we-are' %}

<li class="c-menu-category mzp-has-drop-down mzp-js-expandable">
  <a class="c-menu-title" href="{{ url('mozorg.about.index') }}" aria-haspopup="true" aria-controls="c-menu-panel-about" data-testid="navigation-link-who-we-are">{{ ftl('navigation-v2-who-we-are') }}</a>
  <div class="c-menu-panel" id="c-menu-panel-about" data-testid="navigation-menu-who-we-are">
    <div class="c-menu-panel-container">
      <button class="c-menu-button-close" type="button" aria-controls="c-menu-panel-about">{{ ftl('navigation-v2-close-who-we-are-menu') }}</button>
      <div class="c-menu-panel-content">
        <ul class="mzp-l-rows-four">
          <li>
            <section class="c-menu-item mzp-has-icon">
              <a class="c-menu-item-link" href="{{ url('mozorg.about.manifesto') }}" data-link-text="Mozilla Manifesto" data-link-position="topnav - who-we-are">
                <svg class="c-menu-item-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="#42435a" d="M9.5 28.6h13.1c2.6 0 4.6-2.1 4.6-4.6V8.1c0-2.6-2.1-4.6-4.6-4.6H9.5c-2.6 0-4.6 2.1-4.6 4.6V24c-.1 2.5 2 4.6 4.6 4.6zM7.6 8.1c0-1 .8-1.8 1.8-1.8h13.1c1 0 1.8.8 1.8 1.8V24c0 1-.8 1.8-1.8 1.8h-13c-1 0-1.8-.8-1.8-1.8V8.1zm12.6 2.3h-8.4c-.4 0-.7-.3-.7-.7 0-.4.3-.7.7-.7h8.4c.4 0 .7.3.7.7 0 .4-.3.7-.7.7zm-8.4 4.2h8.4c.4 0 .7-.3.7-.7s-.3-.7-.7-.7h-8.4c-.4 0-.7.3-.7.7s.3.7.7.7zm8.4 4.2h-8.4c-.4 0-.7-.3-.7-.7s.3-.7.7-.7h8.4c.4 0 .7.3.7.7s-.3.7-.7.7zM11.8 23h3.6c.4 0 .7-.3.7-.7s-.3-.7-.7-.7h-3.6c-.4 0-.7.3-.7.7s.3.7.7.7z"></path></svg>
                <h4 class="c-menu-item-title">{{ ftl('navigation-v2-mozilla-manifesto') }}</h4>
              {% if ftl_has_messages('navigation-v2-learn-about-the-values') %}
                <p class="c-menu-item-desc">{{ ftl('navigation-v2-learn-about-the-values') }}</p>
              {% endif %}
              </a>
            </section>
          </li>
          <li>
            <section class="c-menu-item mzp-has-icon">
              <a class="c-menu-item-link" href="https://foundation.mozilla.org/?{{ utm_params }}" data-link-text="Mozilla Foundation" data-link-position="topnav - who-we-are">
                <svg class="c-menu-item-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="#42435a" d="M16 9.3V4H2.7v24h26.7V9.3H16zm-8 16H5.3v-2.7H8v2.7zM8 20H5.3v-2.7H8V20zm0-5.3H5.3V12H8v2.7zm0-5.4H5.3V6.7H8v2.6zm5.3 16h-2.7v-2.7h2.7v2.7zm0-5.3h-2.7v-2.7h2.7V20zm0-5.3h-2.7V12h2.7v2.7zm0-5.4h-2.7V6.7h2.7v2.6zm13.4 16H16v-2.7h2.7V20H16v-2.7h2.7v-2.7H16V12h10.7v13.3zM24 14.7h-2.7v2.7H24v-2.7zm0 5.3h-2.7v2.7H24V20z"></path></svg>
                <h4 class="c-menu-item-title">{{ ftl('navigation-v2-mozilla-foundation') }}</h4>
                <p class="c-menu-item-desc">{{ ftl('navigation-v2-meet-the-not-for-profit-behind') }}</p>
              </a>
            </section>
          </li>
          <li>
            <section class="c-menu-item mzp-has-icon">
              <a class="c-menu-item-link" href="{{ url('mozorg.about.leadership.index') }}" data-link-text="Leadership" data-link-position="topnav - who-we-are">
                <svg class="c-menu-item-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="#42435a" d="M22.7 13.9V2.7H9.3v11.2c0 .5.2.9.7 1.1l5.6 3.3-1.3 3.1-4.5.4 3.5 3-1.1 4.4L16 27l3.9 2.4-1-4.4 3.5-3-4.5-.4-1.3-3.1 5.6-3.3c.2-.4.5-.8.5-1.3zm-5.4 2.4l-1.3.8-1.3-.8V4h2.7v12.3z"></path></svg>
                <h4 class="c-menu-item-title">{{ ftl('navigation-v2-leadership') }}</h4>
              {% if ftl_has_messages('navigation-v2-meet-the-team-thats-building') %}
                <p class="c-menu-item-desc">{{ ftl('navigation-v2-meet-the-team-thats-building') }}</p>
              {% endif %}
              </a>
            </section>
          </li>
          <li>
            <section class="c-menu-item mzp-has-icon">
              <a class="c-menu-item-link" href="{{ url('mozorg.contribute') }}" data-link-text="Get Involved" data-link-position="topnav - who-we-are">
                <svg class="c-menu-item-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="#42435a" d="M12 22.7l4-3.9c-.5-.1-.9-.1-1.3-.1C11.1 18.7 4 20.5 4 24v2.7h12l-4-4zm2.7-6.7c2.9 0 5.3-2.4 5.3-5.3s-2.4-5.3-5.3-5.3-5.3 2.4-5.3 5.3c-.1 2.9 2.3 5.3 5.3 5.3z"></path><path fill="#42435a" d="M20.6 27.3L16 22.7l1.9-1.9 2.8 2.8 6.8-6.9 1.9 1.9-8.8 8.7z"></path></svg>
                <h4 class="c-menu-item-title">{{ ftl('navigation-v2-get-involved') }}</h4>
                <p class="c-menu-item-desc">{{ ftl('navigation-v2-join-the-fight-for-a') }}</p>
              </a>
            </section>
          </li>
          <li>
            <section class="c-menu-item mzp-has-icon">
              <a class="c-menu-item-link" href="{{ url('careers.home') }}" data-link-text="Careers" data-link-position="topnav - who-we-are">
                <svg class="c-menu-item-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32"><path fill="#42435a" d="M13.3 21.3V20H4v5.3C4 26.8 5.2 28 6.7 28h18.7c1.5 0 2.7-1.2 2.7-2.7V20h-9.3v1.3h-5.5zm13.4-12h-5.3V6.7L18.7 4h-5.3l-2.7 2.7v2.7H5.3c-1.5 0-2.7 1.2-2.7 2.7v4c0 1.5 1.2 2.7 2.7 2.7h8V16h5.3v2.7h8c1.5 0 2.7-1.2 2.7-2.7v-4c0-1.5-1.2-2.7-2.6-2.7zm-8 0h-5.3V6.7h5.3v2.6z"></path></svg>
                <h4 class="c-menu-item-title">{{ ftl('navigation-v2-careers') }}</h4>
                <p class="c-menu-item-desc">{{ ftl('navigation-v2-work-for-a-mission-driven-updated') }}</p>
              </a>
            </section>
          </li>
          <li>
            <section class="c-menu-item mzp-has-icon">
              <a class="c-menu-item-link" href="https://blog.mozilla.org/?{{ utm_params }}" data-link-text="Mozilla Blog" data-link-position="topnav - who-we-are">
                <svg class="c-menu-item-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="#42435a" d="M21.1 7.5c-.2-.2-.2-.5 0-.7l.5-.5c.8-.8 2.1-.8 2.9 0l1.2 1.2c.8.8.8 2.1 0 2.9l-.5.5c-.2.2-.5.2-.7 0l-3.4-3.4zm2.3 4.5c.2.2.2.5 0 .7L12.7 23.4c-.2.2-.4.3-.6.4l-5.7 2.4c-.3.1-.6 0-.7-.3-.1-.1-.1-.3 0-.4L8.1 20c.1-.2.3-.5.4-.6L19.2 8.6c.2-.2.5-.2.7 0l3.5 3.4zM11.5 22.7l-3.9 1.7 1.7-3.9c0-.1.1-.2.2-.2l2.3 2.3c-.1 0-.2.1-.3.1z"></path></svg>
                <h4 class="c-menu-item-title">{{ ftl('navigation-v2-mozilla-blog') }}</h4>
              {% if ftl_has_messages('navigation-v2-learn-about-mozilla-and') %}
                <p class="c-menu-item-desc">{{ ftl('navigation-v2-learn-about-mozilla-and') }}</p>
              {% endif %}
              </a>
            </section>
          </li>
        {% if ftl_has_messages('navigation-v2-impact', 'navigation-v2-find-out-how') %}
          <li>
            <section class="c-menu-item mzp-has-icon">
              <a class="c-menu-item-link" href="{{ url('mozorg.impact-report.index') }}" data-link-text="Impact" data-link-position="topnav - who-we-are">
                  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="c-menu-item-icon"><g transform="translate(4 1)" fill="none"><path d="M.4 14.7 4 12v7l-2.4 1.8A1 1 0 0 1 0 20v-4.5a1 1 0 0 1 .4-.8zM15.6 14.7 12 12v7l2.4 1.8A1 1 0 0 0 16 20v-4.5a1 1 0 0 0-.4-.8z" stroke="#42435a" stroke-width="2"/><path d="M5.137 4.14 7.127.569a1 1 0 0 1 1.747 0l1.989 3.57A9 9 0 0 1 12 8.52V19.02H4V8.52a9 9 0 0 1 1.137-4.38z" stroke="#42435a" stroke-width="2"/><circle cx="8" cy="8" r="1.5" fill="#42435a"/><path d="M7.95 16v6" stroke="#42435a" stroke-linecap="round" stroke-width="2"/></g></svg>
                <h4 class="c-menu-item-title">{{ ftl('navigation-v2-impact') }}</h4>
                <p class="c-menu-item-desc">{{ ftl('navigation-v2-find-out-how') }}</p>
              </a>
            </section>
          </li>
        {% endif %}
        </ul>
        <p class="c-menu-category-link">
          <a href="{{ url('mozorg.about.index') }}" data-link-text="More About Mozilla" data-link-position="topnav - who-we-are">{{ ftl('navigation-v2-more-about-mozilla') }}</a>
        </p>
      </div>
    </div><!-- close .c-menu-panel-container -->
  </div><!-- close .c-menu-panel -->
</li><!-- close who we are -->
